<template>
  <section id="schedule">
    <section class="btn-list" ref="week">
      <a-dropdown>
        <template #overlay>
          <a-menu @click="handleGradeClick">
            <a-menu-item v-for="(item,index) in gradeArr" :key="item.value" align="center">{{
                item.label
              }}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <g>
              <g>
                <rect fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="48" height="48" stroke-width="3"
                      stroke="none"
                      fill-rule="evenodd"/>
                <polygon stroke="#98A6AD" stroke-width="3" fill="none" fill-rule="nonzero" stroke-linejoin="round"
                         points="6 9 20.4 25.8177778 20.4 38.4444444 27.6 42 27.6 25.8177778 42 9"/>
              </g>
            </g>
          </svg>
          <p>筛选年级</p>
        </a-button>
      </a-dropdown>
      <a-button @click="visibleWeek=true" :class="isSelectWeek ? 'is-select':''">
        <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <g>
            <g>
              <rect fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="48" height="48" stroke-width="3" stroke="none"
                    fill-rule="evenodd"/>
              <polygon stroke="#98A6AD" stroke-width="3" fill="none" fill-rule="nonzero" stroke-linejoin="round"
                       points="6 9 20.4 25.8177778 20.4 38.4444444 27.6 42 27.6 25.8177778 42 9"/>
            </g>
          </g>
        </svg>
        <p>筛选周数</p>
      </a-button>
    </section>

    <section>
      <section class="release">
        <h1>发布人数</h1>
        <section class="release-user">
          <p>总人数：{{ weekyInfo.total }}</p>
          <p>发布人数：{{ weekyInfo.pub }}</p>
          <p>未发布人数：{{ weekyInfo.unpub }}</p>
          <section class="release-chart" ref="chart"></section>
        </section>
      </section>
      <section class="unpublished">
        <h1>未发布人数</h1>
        <section class="unpublished-user">
          <section class="user-list">
            <a-table
                :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
                :data-source="weekyInfo.list"
                :loading="isloading"
                :pagination="false"
                :scroll="{ y: 580 }"
                :rowKey="(record, index) => record.id"
                :class="isEmpty ? '' :'weeky-empty'"
            >
              <a-table-column key="username" title="姓名" data-index="username" align="center"/>
              <a-table-column key="position" title="社团职位" data-index="roles_name" align="center"/>
              <a-table-column key="phone" title="联系电话" data-index="phone" align="center"/>
              <a-table-column key="grade" title="年级" data-index="grade" align="center"/>
              <a-table-column key="isLogin" title="状态" data-index="isLogin" align="center">
                <template #default="{ text: tags }">
                  <a-tag color="red">未发布</a-tag>
                </template>
              </a-table-column>
            </a-table>
          </section>
        </section>
      </section>
    </section>
  </section>
  <!--  筛选周数-->
  <a-modal v-model:visible="visibleWeek" :footer="null" :getContainer="$refs.week" width="100%" :mask="false">
    <section style="text-align: center">
      <a-input v-model:value="selectWeek" placeholder="请输入周数" type="number"/>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="handleSelectWeek">筛选</a-button>
      <a-button type="primary" @click="resetSelect">重置</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, onMounted, reactive, computed, toRefs, watch} from 'vue'
import * as echarts from 'echarts/dist/echarts'

export default defineComponent({
  name: "schedule",
  setup() {
    const {proxy} = getCurrentInstance()
    let weekyInfo = ref("")
    let isloading = ref(true)
    let isSelectWeek = ref(false)
    let visibleWeek = ref(false)
    let chart = ref("")
    let echart = ref("")
    let gradeArr = ref("")
    let selectWeek = ref("")
    let isEmpty = ref("")
    let gradeId = ref("")
    let option = reactive([])
    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });

    watch(weekyInfo, (e) => {
      if (e.res) {
        option.value.title.subtext = weekyInfo.value.res
        option.value.series.data = [
          {name: "发布人数已达到", value: weekyInfo.value.res.slice(0, -1)},
          {name: "未发布人数已达到", value: 100 - Math.floor(weekyInfo.value.res.slice(0, -1))}
        ]
        echart.value.setOption(option.value)
      }
    })

    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    onMounted(() => {
      proxy.$request(proxy.$getRoute(32).route_method, proxy.$getRoute(32).route_url, {}).then(res => {
        weekyInfo.value = res.data
        isloading.value = false

        option.value = {
          title: {
            text: "发布人数已达到",
            subtext: `${weekyInfo.value.res}`,
            textStyle: {
              fontFamily: "PingFang SC-Medium, PingFang SC",
              fontSize: 12,
              lineHeight: 16,
              color: "#fff",
              letterSpacing: 2,
            },
            subtextStyle: {
              fontSize: 26,
              fontWeight: 'bold',
              color: "#fff"
            },
            x: 'center',
            y: "30%"
          },
          legend: {
            show: false
          },
          tooltip: {
            trigger: 'item'
          },
          series: {
            name: '',
            type: 'pie',
            label: [],
            data: [
              {name: "发布人数已达到", value: weekyInfo.value.res.slice(0, -1)},
              {name: "未发布人数已达到", value: 100 - Math.floor(weekyInfo.value.res.slice(0, -1))}
            ]
          },
          color: ["#6777ef", "#969fdc"],
        }
        echart.value = echarts.init(chart.value)
        echart.value.setOption(option.value)

        proxy.$request(proxy.$getRoute(29).route_method, proxy.$getRoute(29).route_url, {}).then(res => {
          gradeArr.value = res.data
          gradeArr.value.unshift({value: 0, label: "全部"})
        })
      })
    })

    //筛选年级
    const handleGradeClick = (e) => {
      gradeId.value = e.key
      weekyInfo.value = []
      isloading.value = true
      isEmpty.value = false
      proxy.$request(proxy.$getRoute(32).route_method, proxy.$getRoute(32).route_url, {
        grade: gradeId.value,
        week: selectWeek.value,
      }).then(res => {
        isloading.value = false
        weekyInfo.value = res.data
        if (!weekyInfo.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
        isloading.value = false
      })
    }
    //重置筛选
    const resetSelect = () => {
      isloading.value = true
      weekyInfo.value = []
      selectWeek.value = ""
      proxy.$request(proxy.$getRoute(32).route_method, proxy.$getRoute(32).route_url, {
        grade: gradeId.value,
        week: selectWeek.value
      }).then(res => {
        isloading.value = false
        isSelectWeek.value = false
        visibleWeek.value = false
        weekyInfo.value = res.data
        if (!weekyInfo.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
        isloading.value = false
      })
    }
    //筛选周数
    const handleSelectWeek = () => {
      weekyInfo.value = []
      isloading.value = true
      proxy.$request(proxy.$getRoute(32).route_method, proxy.$getRoute(32).route_url, {
        grade: gradeId.value,
        week: selectWeek.value,
      }).then(res => {
        isloading.value = false
        isSelectWeek.value = true
        visibleWeek.value = false
        weekyInfo.value = res.data
        if (!weekyInfo.value.length) isEmpty.value = true
      }).catch(res => {
        isEmpty.value = true
        isloading.value = false
      })
    }

    return {
      weekyInfo,
      hasSelected,
      ...toRefs(state),
      isloading,
      onSelectChange,
      chart,
      gradeArr,
      visibleWeek,
      handleGradeClick,
      resetSelect,
      handleSelectWeek,
      selectWeek,
      isEmpty,
      isSelectWeek
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#schedule {
  font-family: PingFang SC-Medium, PingFang SC;

  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }

  .btn-list button {
    display: flex;
    align-items: center;
    width: 106px;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .btn-list + section {
    display: flex;
    justify-content: space-between;
  }

  .btn-list + section h1 {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    line-height: 28px;
    margin-bottom: 16px;
  }

  .release {
    width: 284px;
  }

  .unpublished {
    width: 1211px;
  }

  .release-user {
    width: 284px;
    height: 376px;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 28px 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .release-user > p {
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    margin: 0;
  }

  .release-chart {
    width: 184px;
    height: 184px;
  }

  .weeky-list {
    border-radius: 8px;
    overflow: hidden;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 15px;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .user-list .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background: @selectColor;
  }

  .user-list .ant-checkbox-checked .ant-checkbox-inner {
    border-color: @selectColor;
    background: @selectColor;
  }

  .operation {
    display: flex;
    gap: 10px;
  }

  .operation button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child {
    background: #6777EF;
  }

  .operation button:last-child {
    background: #EB5757;
  }

  .ant-table-align-center {
    width: 230px;
  }

  .ant-table-selection-column td {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .weeky-empty .ant-empty {
    display: none !important;
  }

  .weeky-empty .ant-table-placeholder {
    height: 100px;
  }

  .btn-list .ant-modal-content {
    position: absolute;
    left: 21%;
    top: 95px;
    width: 200px;
  }

  .btn-list .ant-modal-root .ant-modal-close {
    display: none;
  }

  .btn-list .ant-modal-body {
    padding: 15px;
  }

  .btn-list .modal-button {
    justify-content: space-between;
  }

  .btn-list .modal-button button {
    width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  .btn-list .modal-button button:first-child {
    background: @selectColor;
    color: #fff;
  }

  .btn-list .modal-button button:last-child {
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px #00000004;
    color: #000;
  }

  .btn-list .ant-modal-body .ant-input::-webkit-outer-spin-button,
  .btn-list .ant-modal-body .ant-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  .is-select p {
    color: @selectColor !important;
  }

  .is-select svg path {
    stroke: @selectColor;
  }

  .is-select svg polygon {
    stroke: @selectColor;
  }

}
</style>
